import React, { useState } from "react";
import { StyleSheet, View, TextInput, Text, Button, TouchableOpacity } from "react-native";
import Animated, { useSharedValue, useAnimatedStyle, withTiming, interpolate, Extrapolate } from "react-native-reanimated";

import { SafeAreaView, useSafeAreaInsets } from "react-native-safe-area-context";
import DefaultStyles from "@constants/Styles";

const AuthFormSwitcher = () => {
    const [isLogin, setIsLogin] = useState(true);
    const animation = useSharedValue(0);
    const defaultStyles = DefaultStyles();
    const toggleForm = () => {
        animation.value = withTiming(isLogin ? 1 : 0, { duration: 800 });
        setIsLogin(!isLogin);
    };

    const loginStyle = useAnimatedStyle(() => ({
        transform: [{ translateX: interpolate(animation.value, [0, 1], [0, 300], Extrapolate.CLAMP) }],
        opacity: interpolate(animation.value, [0, 0.5], [1, 0], Extrapolate.CLAMP),
    }));

    const registerStyle = useAnimatedStyle(() => ({
        transform: [{ translateX: interpolate(animation.value, [0, 1], [-300, 0], Extrapolate.CLAMP) }],
        opacity: interpolate(animation.value, [0.5, 1], [0, 1], Extrapolate.CLAMP),
    }));

    return (
        <View style={styles.container}>
            {/* <Button title="Toggle Form" onPress={toggleForm} /> */}

            <View style={{ height: 120 }}>
                <Animated.View style={[styles.form, loginStyle]}>
                    {/* Login Form Inputs and Button */}
                    <TextInput placeholder="Username" style={[defaultStyles.inputField, { marginBottom: 14 }]} />
                    <TextInput placeholder="Password" style={defaultStyles.inputField} secureTextEntry />
                    {/* <TextInput placeholder="Password" style={styles.input} secureTextEntry /> */}
                    {/* <Button title="Login" onPress={() => { }} /> */}
                </Animated.View>

                <Animated.View style={[styles.form, registerStyle]}>
                    {/* Register Form Inputs and Button */}
                    <TextInput placeholder="Email" style={defaultStyles.inputField} />
                    <TextInput placeholder="Password" style={defaultStyles.inputField} secureTextEntry />
                    {/* <Button title="Register" onPress={() => { }} /> */}
                </Animated.View>
            </View>

            <TouchableOpacity style={defaultStyles.btn}>
                <Text style={defaultStyles.btnText}>Continue</Text>
            </TouchableOpacity>

            <View></View>
        </View>
    );
};

const styles = StyleSheet.create({
    container: {
        flex: 1,
        padding: 26,
    },
    form: {
        width: "100%",
        position: "absolute",
    },
    input: {
        width: "100%",
        padding: 10,
        margin: 10,
        borderWidth: 1,
        borderColor: "grey",
    },

    // Other styles...
});

export default AuthFormSwitcher;
